<template>
	<div class="CAttributeTags">
		<span 
			class="at-item"
			v-for="(item, index) in data" 
			v-text="item.name"
			:style="{'background':item.bgColor, 'color':item.textColor}"
			>
		</span>
	</div>
</template>

<script>
	export default {
		name: 'CAttributeTags',
		data() {
			return {
			}
		},
		methods: {
			selectItem: function (index) {
				this.$emit('select-item', JSON.parse(this.data).length - index);
		    }	
		},
		props: ['data', 'hideIndex']
	}
</script>

<style scoped="scoped">
	.at-item {
		margin-right: 6px;
		padding: 1px 3px;
		font-size: 12px;
		border-radius: 2px;
	}
	
	.et-item-hide {
		border: 1px dashed #666;
		color: red !important;
		display: block;
		margin-top: 10px;
		padding: 6px;
	}
</style>